<template>
  <div class="orderMall page" ref="webview">
    <div class="hd-bar">
      <van-nav-bar title="我的订单" class="bg_white" left-arrow @click-left="$router.push({'path': '/my'})"></van-nav-bar>
      <div class="order-tab">
        <span class="tab" @click="orderTab('mall')">配送订单</span>
        <span class="tab active" @click="orderTab('ad')">复消订单</span>
      </div>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="nodata" v-if="dataList.length===0" style="height:200px;">
          <span>暂无订单</span>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>2?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-else>
          <template v-for="(item, index) in dataList">
            <div class="order-list" :key="'order-item-'+ index">
              <div class="title">
                <span class="number">订单编号：{{ item.order_no }}</span>
                <span class="state">{{item.status_str}}</span>
              </div>
              <div class="info-box">
                <div class="img">
                  <van-image width="100%" :height="$tools.toPX(160)" fit="contain" lazy-load :src="item.goods_img">
                    <template v-slot:loading>
                      <van-loading type="spinner" size="24" />
                    </template>
                  </van-image>
                </div>
                <div class="info">
                  <p class="name van-multi-ellipsis--l2">{{ item.goods_name }}</p>
                  <div class="slot">
                    <span class="c2"></span>
                    <span class="c1">{{ item.norm_price }}</span>
                  </div>
                  <div class="slot">
                    <span class="c1"></span>
                    <span class="c2">x{{ item.num }}</span>
                  </div>
                </div>
              </div>
              <div class="operation van-hairline--top" v-if="item.status ===2">
                <div class="tracking">
                  <template v-if="item.logistics_no">快递单号:
                    <span class="text">{{item.logistics_no}}</span>
                    <span class="icon-copy" @click.stop="copy(item.logistics_no)"></span>
                  </template>
                </div>
                <span class="confirm" @click.stop="confirmGoods(item)">确认收货</span>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup v-model="isPopupShow" round position="bottom">
      <div class="confirm-goods">
        <div class="title_name">确认收货</div>
        <div class="confirm_info">您是否确认已经收到以下订单的商品？</div>
        <div class="info-box">
          <div class="img">
            <van-image width="100%" :height="$tools.toPX(160)" fit="contain" lazy-load :src="orderInfo.goods_img">
              <template v-slot:loading>
                <van-loading type="spinner" size="24" />
              </template>
            </van-image>
          </div>
          <div class="info">
            <p class="name van-multi-ellipsis--l2">{{orderInfo.goods_name}}</p>
            <div class="slot">
              <span class="c1">{{orderInfo.norm_price}}积分</span>
              <span class="c2">x{{orderInfo.num}}</span>
            </div>
          </div>
        </div>
        <div class="tis">谨慎操作，如尚未收到商品，请不要点击确认！</div>
        <div class="submit">
          <span class="btn cancel" @click="isPopupShow= false">取消操作</span>
          <span class="btn confirm" @click="confirmrRecv">确认收货</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'orderAd',
  data () {
    return {
      isPopupShow: false,
      apiType: 'user',
      apiUrl: 'order',
      paramsUrl: 'list',
      orderInfo: {},
      params: {
        ca: 2
      }
    };
  },
  mixins: [mixins],
  mounted () {
    this.$nextTick(() => {
      this.getList('order', true);
    });
  },
  methods: {
    copy (data) {
      this.$copyText(data).then((e) => {
        this.$toast('复制成功');
      }, (e) => {
        console.log(e);
      });
    },
    confirmrRecv () {
      this.isLoading = true;
      this.$API.user.order({
        no: this.orderInfo.order_no
      }, 'recv').then(res => {
        if (!res.code) {
          this.isPopupShow = false;
          this.getList('order', true);
          this.$toast('确认成功');
          this.isPopupShow = false;
          this.isLoading = false;
        } else {
          this.$toast(res.message);
          this.isLoading = false;
        }
      });
    },
    orderTab (type) {
      this.$router.push({ path: '/order/' + type, query: { isFromRoute: true } });
    },
    goDetailsLink (data) {
      this.$router.push({ path: '/order/details', query: { order_no: data } });
    }
  }
};
</script>
<style lang="less" scoped>
.orderMall {
  height: 100%;
  .hd-bar {
    background: linear-gradient(90deg, #917eff 0%, #917eff 100%);
  }
  .content {
    height: calc(100% - 192px);
    box-sizing: border-box;
    overflow: auto;
  }
  .operation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 8px;
    margin: 0 -20px;
    font-size: 28px;
    color: #969aa6;
    .text {
      color: #353535;
    }
    .icon-copy {
      display: inline-block;
      width: 26px;
      height: 26px;
      background-image: url('/static/images/icon-copy-active.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 26px 26px;
      margin-left: 15px;
    }
    .confirm,
    .cancel {
      color: #fff;
      padding: 10px 24px;
      border-radius: 60px;
      font-size: 28px;
    }
    .confirm {
      background-color: #ff0000;
      color: #fff;
    }
    .confirm_bg {
      background-color: #917eff;
      color: #fff;
    }
    .cancel {
      background-color: #fff;
      color: #917eff;
      border: 0.02rem solid #7c67ff;
    }
  }
  .operation.sign {
    justify-content: flex-end;
  }
  .confirm-goods {
    padding: 20px 40px 0;
    .title_name {
      font-size: 40px;
      color: #353535;
      padding: 15px 0 0;
      text-align: center;
    }
    .confirm_info {
      padding: 30px 0;
      color: #353535;
      font-size: 34px;
      text-align: center;
    }
    .tis {
      padding: 30px 0;
      color: #555;
      font-size: 24px;
    }
    .submit {
      display: flex;
      margin: 0 -40px;
      border-top: 1px solid #eee; /*no*/
      .btn {
        flex: 1;
        font-size: 34px;
        padding: 34px 0 31px;
        text-align: center;
      }
      .btn:first-child {
        border-right: 1px solid #eee; /*no*/
      }
      .cancel {
        color: #999;
      }
      .confirm {
        color: #ff0000;
      }
    }
  }
}
</style>
